<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    

    <title>ES6中变量声明、解构赋值、模版字符串 | yale前端技术博客</title>
    <meta name="author" content="Yale">
    
    <meta name="description" content="ES6语法引入了一些新的功能，改变了以前JS的一些书写形式，使代码的书写更加的优雅，例如引入promise语法，解决回调地狱问题…">
    
    
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <meta property="og:title" content="ES6中变量声明、解构赋值、模版字符串"/>
    <meta property="og:site_name" content="Yale"/>

    
    <meta property="og:image" content="undefined"/>
    

    <link rel="icon" type="image/png" href="/favicon.png">
    <link rel="alternate" href="/atom.xml" title="Yale" type="application/atom+xml">
    <link rel="stylesheet" href="/css/lib/materialize.min.css">
    <link rel="stylesheet" href="/css/lib/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css" media="screen" type="text/css">

    
        <link rel="stylesheet" href="/css/lib/prettify-tomorrow-night-eighties.css" type="text/css">
    
    <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>


<body>
    <nav class="orange">
    <div class="nav-wrapper">
        <a href="#" data-activates="main-menu" class="button-collapse">
            <i class="fa fa-navicon"></i>
        </a>
        <div class="">
            <a href="/" class="brand-logo hide-on-med-and-down">Yale</a>
            <ul class="right hide-on-med-and-down">
                
                    <li>
                        <a class="menu-home " href="/" >
                            <i class="fa fa-home "></i>
                            
                            首页
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-archive " href="/archives" >
                            <i class="fa fa-archive "></i>
                            
                            归档
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-category category-menu" href="javascript:;" data-activates="category-menu" >
                            <i class="fa fa-bookmark "></i>
                            
                            分类
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-reading " href="/reading" >
                            <i class="fa fa-book "></i>
                            
                            读书
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-about " href="/about" >
                            <i class="fa fa-user "></i>
                            
                            关于
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-search modal-trigger " href="#search" >
                            <i class="fa fa-search "></i>
                            
                            搜索
                        </a>
                    </li>
                
            </ul>
            <div>
    <ul class="side-nav indigo darken-1" id="main-menu">
        
        <li class="side-user">
            <div class="row">
                <div class="col s4 no-padding">
                    <img class="avatar-image circle responsive-img" src="http://ww2.sinaimg.cn/small/74990035jw1f1rjkd681bj20rs0rsdhg.jpg" alt="User Avatar">
                </div>
                <div class="info col s8 valign-wrapper no-padding">
                    <div class="valign">
                        <p class="name">Yale</p>
                        <p class="desc">Web前端/Nodejs/技术宅</p>
                    </div>
                </div>
            </div>
        </li>
        

        
            <li class="no-padding">
                <a class="waves-effect menu-home " href="/" >
                    <i class="fa fa-home "></i>
                    
                    首页
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-archive " href="/archives" >
                    <i class="fa fa-archive "></i>
                    
                    归档
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-category category-menu" href="javascript:;" data-activates="category-menu" >
                    <i class="fa fa-bookmark "></i>
                    
                    分类
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-reading " href="/reading" >
                    <i class="fa fa-book "></i>
                    
                    读书
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-about " href="/about" >
                    <i class="fa fa-user "></i>
                    
                    关于
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-search modal-trigger " href="#search" >
                    <i class="fa fa-search "></i>
                    
                    搜索
                </a>
            </li>
        
    </ul>

    <ul class="side-nav indigo darken-1" id="category-menu">
    

            

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/CSS3/">
                    CSS3 <span class="right">3 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/CSS3/CSS3笔记/">
                    CSS3笔记 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/CSS3/Flex学习笔记/">
                    Flex学习笔记 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/CSS3/SVG/">
                    SVG <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/HTML5/">
                    HTML5 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/HTML5/HTML5笔记/">
                    HTML5笔记 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/Javascript/">
                    Javascript <span class="right">2 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/Javascript/JavaScript基础知识总结1/">
                    JavaScript基础知识总结1 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/Javascript/JavaScript基础知识总结2/">
                    JavaScript基础知识总结2 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/WebSocket/">
                    WebSocket <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/WebSocket/WebSocket实例运用/">
                    WebSocket实例运用 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/学习随想/">
                    学习随想 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/学习随想/学习随想1/">
                    学习随想1 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/ES6/">
                    ES6 <span class="right">3 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/ES6/ES6中数组和函数的扩展/">
                    ES6中数组和函数的扩展 <span class="right">2 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/ES6/ES6中变量声明、解构赋值、模版字符串/">
                    ES6中变量声明、解构赋值、模版字符串 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/微信小程序/">
                    微信小程序 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/微信小程序/微信小程序笔记/">
                    微信小程序笔记 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/nodejs/">
                    nodejs <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/nodejs/nodejs笔记1/">
                    nodejs笔记1 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/常用软件下载地址/">
                    常用软件下载地址 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/常用软件下载地址/软件下载地址/">
                    软件下载地址 <span class="right">1 篇</span></a>
                </a>
            </li>

        

    </ul>
</div>

        </div>
    </div>
</nav>

<div id="search" class="modal search-modal">
    <div class="row">
        <div class="input-field col s12">
              <input id="search-input" type="text">
              <label for="search-input">搜索</label>
        </div>

    </div>
    <div id="search-result" class="search-result col s12">

    </div>
</div>


    <main>
        <div class="container main-container">
    <nav class="page-nav hide-on-small-only">
    <div class="nav-wrapper indigo">
        <span class="breadcrumb">当前位置（分类目录）</span>
        
            
    
    
    <a class="breadcrumb" href="/categories/ES6/">ES6</a><a class="breadcrumb" href="/categories/ES6/ES6中变量声明、解构赋值、模版字符串/">ES6中变量声明、解构赋值、模版字符串</a>


        

        
    </div>
</nav>

<article>
    <div class="card">
        <div class="card-content">
            

            <div class="article-title">
                
    
        <h1>ES6中变量声明、解构赋值、模版字符串</h1>
    


            </div>
            <time class="pink-link-context" datetime="2016-03-19T16:00:00.000Z"><a href="/2016/03/20/ES6中变量声明、解构赋值、模版字符串/">2016-03-20</a></time>

            <span id="busuanzi_container_page_pv" class="read-times-container">
    <i class="fa fa-eye"></i>
    <span id="busuanzi_value_page_pv"></span>
</span>

            
    <div class="tags-row">
        
            <a href="/tags/ES6知识学习/" class="chip pink lighten-1">ES6知识学习</a>
        
    </div>


            <div class="toc pink-link-context hide-on-med-and-down">
    <ol class="section table-of-contents"><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#ES6的由来"><span class="section table-of-contents-text">ES6的由来</span></a><ol class="section table-of-contents-child"><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#ECMAScript和JavaScript的关系"><span class="section table-of-contents-text">ECMAScript和JavaScript的关系</span></a></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#ES6和ECMAScript-2015的关系"><span class="section table-of-contents-text">ES6和ECMAScript 2015的关系</span></a></li></ol></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#ES6语法转为ES5语法的转换器"><span class="section table-of-contents-text">ES6语法转为ES5语法的转换器</span></a></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#具体ES6语法的学习"><span class="section table-of-contents-text">具体ES6语法的学习</span></a><ol class="section table-of-contents-child"><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#let和const"><span class="section table-of-contents-text">let和const</span></a></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#变量的解构赋值"><span class="section table-of-contents-text">变量的解构赋值</span></a></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#模板字符串"><span class="section table-of-contents-text">模板字符串</span></a></li></ol></li></ol>
</div>


            <div class="entry pink-link-context">
                <p>ES6语法引入了一些新的功能，改变了以前JS的一些书写形式，使代码的书写更加的优雅，例如引入promise语法，解决回调地狱问题…<br><a id="more"></a></p>
<h2 id="ES6的由来"><a href="#ES6的由来" class="headerlink" title="ES6的由来"></a>ES6的由来</h2><h3 id="ECMAScript和JavaScript的关系"><a href="#ECMAScript和JavaScript的关系" class="headerlink" title="ECMAScript和JavaScript的关系"></a>ECMAScript和JavaScript的关系</h3><p>ECMAScript和JavaScript的关系是，前者是后者的规范，后者是前者的一种实现（另外的SECMAScript方言还有Jscript和ActionScript）。日常场合，这两个词是可以互换的。</p>
<h3 id="ES6和ECMAScript-2015的关系"><a href="#ES6和ECMAScript-2015的关系" class="headerlink" title="ES6和ECMAScript 2015的关系"></a>ES6和ECMAScript 2015的关系</h3><p>媒体里面经常可以看到”ECMAScript 2015“这个词，它与ES6是什么关系呢？<br>2011年，ECMAScript 5.1版发布后，就开始制定6.0版了。因此，”ES6”这个词的原意，就是指JavaScript语言的下一个版本。<br>但是，因为这个版本引入的语法功能太多，而且制定过程当中，还有很多组织和个人不断提交新功能。事情很快就变得清楚了，不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布6.0版，过一段时间再发6.1版，然后是6.2版、6.3版等等。</p>
<p>但是，标准的制定者不想这样做。他们想让标准的升级成为常规流程：任何人在任何时候，都可以向标准委员会提交新语法的提案，然后标准委员会每个月开一次会，评估这些提案是否可以接受，需要哪些改进。如果经过多次会议以后，一个提案足够成熟了，就可以正式进入标准了。这就是说，标准的版本升级成为了一个不断滚动的流程，每个月都会有变动。</p>
<p>标准委员会最终决定，标准在每年的6月份正式发布一次，作为当年的正式版本。接下来的时间，就在这个版本的基础上做改动，直到下一年的6月份，草案就自然变成了新一年的版本。这样一来，就不需要以前的版本号了，只要用年份标记就可以了。</p>
<p>ES6的第一个版本，就这样在2015年6月发布了，正式名称就是《ECMAScript 2015标准》（简称ES2015）。2016年6月，小幅修订的《ECMAScript 2016标准》（简称ES2016）如期发布，这个版本可以看作是ES6.1版，因为两者的差异非常小（只新增了数组实例的includes方法和指数运算符），基本上是同一个标准。根据计划，2017年6月将发布ES2017标准。</p>
<p>因此，ES6既是一个历史名词，也是一个泛指，含义是5.1版以后的JavaScript的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。本书中提到“ES6”的地方，一般是指ES2015标准，但有时也是泛指“下一代JavaScript语言”。</p>
<h2 id="ES6语法转为ES5语法的转换器"><a href="#ES6语法转为ES5语法的转换器" class="headerlink" title="ES6语法转为ES5语法的转换器"></a>ES6语法转为ES5语法的转换器</h2><p>由于ES6的语法在浏览器中的支持还不是很好，如果想要使用ES6的语法来编写程序的话，就需要将用ES6语法编写好的程序转换成ES5的语法。<br>Babel转换器<br>Babel是一个广泛使用的ES6转换器，可以将ES6代码转为ES5代码，从而在现有环境执行。<br>Traceur转码器<br>    Google公司的Traceur转码器，也可以将ES6代码转为ES5代码。</p>
<h2 id="具体ES6语法的学习"><a href="#具体ES6语法的学习" class="headerlink" title="具体ES6语法的学习"></a>具体ES6语法的学习</h2><h3 id="let和const"><a href="#let和const" class="headerlink" title="let和const"></a>let和const</h3><pre><code>let用于声明变量，const用于声明常量，const一旦声明，常量的值就不能改变，这就意味着用const一旦声明变量就必须立即初始化，不能留到以后赋值
let只有在块级作用域中有效，let和const语句不会出现变量的提升，ES6规定变量不声明就不能使用，这就出现暂时性死区，ES6这样做主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为，这样的错误在ES5是很常见的，现在有了这种规定，避免此类错误就很容易了。
let、const不允许在相同的作用域内，重复声明同一个变量。
对于复合型的变量，变量名不指向数据，而是指向数据所在的地址。const命令只是保证变量名指向的地址不变，并不保证该地址的数据不变，所以将一个对象声明为常量必须非常小心。
</code></pre><h3 id="变量的解构赋值"><a href="#变量的解构赋值" class="headerlink" title="变量的解构赋值"></a>变量的解构赋值</h3><p>ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值（destructuring）<br>1、数组的解构赋值<br>（1）、var [a, b, c] = [1, 2, 3];<br>上面的代码表示，可以从数组中提取值，按照对应位置，对变量赋值，本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。<br>（2）、也可以是嵌套数组进行解构赋值，例如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">let [foo, [[bar], baz]] = [1, [[2], 3]];</div><div class="line">foo //1</div><div class="line">bar //2</div><div class="line">baz //3</div><div class="line">let [ , , third] = [&quot;foo&quot;, &quot;bar&quot;, &quot;baz&quot;];</div><div class="line">third // baz</div><div class="line">let [x, , y] = [1, 2, 3];</div><div class="line">x //1</div><div class="line">y //3</div><div class="line">let [head, …tail] = [1,2,3,4];</div><div class="line">head //1</div><div class="line">tail //[1,2,3]</div><div class="line">let [x, y, …z] = [&quot;a&quot;];</div><div class="line">x //&quot;a&quot;</div><div class="line">y //undefined</div><div class="line">z //[ ]</div></pre></td></tr></table></figure></p>
<p>（3）、如果解构不成功变量的值就等于undefined<br>    <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">var [foo] = [];</div><div class="line">var [bar, foo] = [1];</div></pre></td></tr></table></figure></p>
<p>以上两种情况都属于结构不成功，foo的值会等于undefined<br>（4）、另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组，这种情况下，解构依然可以成功。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">let [x, y] = [1, 2, 3];</div><div class="line">x //1</div><div class="line">y //2</div><div class="line">let [a, [b], d] = [1, [2, 3], 4];</div><div class="line">a //1</div><div class="line">b //3</div><div class="line">d //4</div></pre></td></tr></table></figure></p>
<p>（5）、如果等号右边不是数组（或者严格地说，不是可遍历的结构），那么就会报错<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">// 报错</div><div class="line">let [foo] = 1;</div><div class="line">let [foo] = false;</div><div class="line">let [foo] = NaN;</div><div class="line">let [foo] = undefined;</div><div class="line">let [foo] = null;</div><div class="line">let [foo] = &#123;&#125;;</div></pre></td></tr></table></figure></p>
<p>上面的表达式都会报错，因为等号右边的值，要么转为对象以后不具备Iterator接口（前五个表达式），要么本身就不具备Iterator接口（最后一个表达式）<br>（6）、解构赋值不仅适用于var命令，也适用于let和const命令<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">var [v1, v2, …., vN] = array</div><div class="line">let [v1, v2, …., vN] = array</div><div class="line">const [v1, v2, …., vN] = array</div></pre></td></tr></table></figure></p>
<p>对于Set结构，也可以使用数组的解构赋值<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">let [x, y, z] = new Set([&quot;a&quot;, &quot;b&quot;, &quot;c&quot;]);</div><div class="line">x //&quot;a&quot;</div></pre></td></tr></table></figure></p>
<p>事实上，只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值<br>（7）、解构赋值允许指定默认值<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">var [foo = true] = [];</div><div class="line">foo //true</div><div class="line">[x, y = &quot;b&quot;] = [&quot;a&quot;];</div><div class="line">x // a</div><div class="line">y // b</div><div class="line">[x, y = &apos;b&apos;] = [&apos;a&apos;, undefined];</div><div class="line">x // a</div><div class="line">y // b</div><div class="line">[x, y = &apos;b&apos;] = [&apos;a&apos;, &apos;c&apos;];</div><div class="line">x // a</div><div class="line">y // c</div></pre></td></tr></table></figure></p>
<p>注意：ES6内部使用严格相等运算符（===），判断一个位置是否有值，所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。<br>如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。<br>（8）、默认值可以引用解构赋值的其他变量，但该变量必须已经声明。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">let [x = 1, y = x] = [];     // x=1; y=1</div><div class="line">let [x = 1, y = x] = [2];    // x=2; y=2</div><div class="line">let [x = 1, y = x] = [1, 2]; // x=1; y=2</div><div class="line">let [x = y, y = 1] = [];     // ReferenceError</div></pre></td></tr></table></figure></p>
<p>上面最后一个表达式之所以会报错，是因为x用到默认值y时，y还没有声明。<br>2、对象的解构赋值<br>（1）、对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">var &#123; foo, bar &#125; = &#123; foo: &quot;aaa&quot;, bar: &quot;bbb&quot; &#125;;</div><div class="line">foo // &quot;aaa&quot;</div><div class="line">bar // &quot;bbb&quot;</div></pre></td></tr></table></figure></p>
<p>（2）、如果变量名与属性名不一致，必须写成下面这样。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">var &#123; foo: baz &#125; = &#123; foo: &apos;aaa&apos;, bar: &apos;bbb&apos; &#125;;</div><div class="line">baz // &quot;aaa&quot;</div><div class="line">let obj = &#123; first: &apos;hello&apos;, last: &apos;world&apos; &#125;;</div><div class="line">let &#123; first: f, last: l &#125; = obj;</div><div class="line">f // &apos;hello&apos;</div><div class="line">l // &apos;world&apos;</div></pre></td></tr></table></figure></p>
<p>这实际上说明，对象的解构赋值是下面形式的简写。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var &#123; foo: foo, bar: bar &#125; = &#123; foo: &quot;aaa&quot;, bar: &quot;bbb&quot; &#125;;</div></pre></td></tr></table></figure></p>
<p>也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">var &#123; foo: baz &#125; = &#123; foo: &quot;aaa&quot;, bar: &quot;bbb&quot; &#125;;</div><div class="line">baz // &quot;aaa&quot;</div><div class="line">foo // error: foo is not defined</div></pre></td></tr></table></figure></p>
<p>上面代码中，真正被赋值的是变量baz,而不是模式foo<br>（3）、对象的解构也可以指定默认值<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">var &#123;x, y = 5&#125; = &#123;x:1&#125;;</div><div class="line">x //1</div><div class="line">y //5</div><div class="line">默认值生效的条件是，对象的属性值严格等于undefined</div><div class="line">var &#123;x = 3&#125; = &#123;x: undefined&#125;;</div><div class="line">x // 3</div><div class="line"></div><div class="line">var &#123;x = 3&#125; = &#123;x: null&#125;;</div><div class="line">x // null</div></pre></td></tr></table></figure></p>
<p>（4）、如果解构失败，变量的值等于undefined<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">var &#123;foo&#125; = &#123;bar: &apos;baz&apos;&#125;;</div><div class="line">foo // undefined</div></pre></td></tr></table></figure></p>
<p>（5）、如果要将一个已经声明的变量用于解构赋值，必须非常小心。<br>// 错误的写法<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">var x;</div><div class="line">&#123;x&#125; = &#123;x: 1&#125;;</div><div class="line">// SyntaxError: syntax error</div></pre></td></tr></table></figure></p>
<p>上面代码的写法会报错，因为JavaScript引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免JavaScript将其解释为代码块，才能解决这个问题。<br>// 正确的写法<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">(&#123;x&#125; = &#123;x: 1&#125;);</div></pre></td></tr></table></figure></p>
<p>（6）、由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">var arr = [1, 2, 3];</div><div class="line">var &#123;0 : first, [arr.length - 1] : last&#125; = arr;</div><div class="line">first // 1</div><div class="line">last // 3</div></pre></td></tr></table></figure></p>
<p>3、字符串的解构赋值<br>字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">const [a, b, c, d, e] = &apos;hello&apos;;</div><div class="line">a // &quot;h&quot;</div><div class="line">b // &quot;e&quot;</div><div class="line">c // &quot;l&quot;</div><div class="line">d // &quot;l&quot;</div><div class="line">e // &quot;o&quot;</div></pre></td></tr></table></figure></p>
<p>类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">let &#123;length : len&#125; = &apos;hello&apos;;</div><div class="line">len // 5</div></pre></td></tr></table></figure></p>
<p>4、数值和布尔值的解构赋值<br>解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">let &#123;toString: s&#125; = 123;</div><div class="line">s === Number.prototype.toString // true</div><div class="line"></div><div class="line">let &#123;toString: s&#125; = true;</div><div class="line">s === Boolean.prototype.toString // true</div><div class="line">```   </div><div class="line">上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。   </div><div class="line">解构赋值的规则是，只要等号右边的值不是对象，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。</div><div class="line">```    </div><div class="line">let &#123; prop: x &#125; = undefined; // TypeError</div><div class="line">let &#123; prop: y &#125; = null; // TypeError</div></pre></td></tr></table></figure></p>
<p>5、函数参数的解构赋值<br>6、圆括号问题</p>
<h3 id="模板字符串"><a href="#模板字符串" class="headerlink" title="模板字符串"></a>模板字符串</h3><p>1、如果不拼接字符串就是用单引号<br>2、如果涉及到字符串拼接，就使用模板字符串在模板字符串中，回车换行会原样保留，类似于pre标签，如果想要拼接字符串，就使用${表达式}中间的表达式可以是变量，也可以是一个1+1之类的</p>

                
<p class="pink-link-context">
    <a href="/2016/03/25/ES6中对象的扩展/" rel="next" title="ES6中对象的扩展">
    上一篇：ES6中对象的扩展
  </a>
</p>



<p class="pink-link-context">
    <a href="/2016/02/26/WebSocket/" rel="next" title="WebSocket实例运用">
    下一篇：WebSocket实例运用
  </a>
</p>


            </div>
			
        </div>
    </div>
</article>




    <section id="comment">
        <!-- 多说评论框 start -->
        <div id="ds-thread" class="ds-thread" data-thread-key="2016/03/20/ES6中变量声明、解构赋值、模版字符串/" data-title="ES6中变量声明、解构赋值、模版字符串" data-url="http://yalesuperman.oschina.io/2016/03/20/ES6中变量声明、解构赋值、模版字符串/"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var pathname = location.pathname;

    var duoshuoQuery = {short_name:"yalesuperman"};
        (function() {
            if(pathname === '/about/') {
                return;
            }
            var ds = document.createElement('script');
            ds.type = 'text/javascript';ds.async = true;
            ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
            ds.charset = 'UTF-8';
            (document.getElementsByTagName('head')[0] 
             || document.getElementsByTagName('body')[0]).appendChild(ds);
        })();
        </script>
    <!-- 多说公共JS代码 end -->

    </section>



</div>

        <div class="fixed-action-btn float-sitemap">
    <a class="btn-floating btn-large pink">
      <i class="fa fa-caret-square-o-up"></i>
    </a>
    <ul>
      <li><a class="btn-return-top btn-floating waves-effect green" title="回到顶部"><i class="fa fa-arrow-circle-o-up"></i></a></li>
      <li><a class="btn-floating waves-effect button-collapse yellow darken-1"  data-activates="main-menu" title="menu"><i class="fa fa-navicon"></i></a></li>
    </ul>
  </div>

    </main>
    <footer class="page-footer black darken-1">
    
    <div class="container">
        <div class="row">
            
            <div class="social-group col m4 s12">
                <h5 class="white-text">社交</h5>
                
                    <a class="social-link" href="https://github.com/NotsayJustdo" target="_blank">
                        <i class="fa fa-2x fa-github"></i>
                    </a>
                
                    <a class="social-link" href="" target="_blank">
                        <i class="fa fa-2x fa-rss"></i>
                    </a>
                
                <div class="site-visitors-container white-text">
                    <span>
                        <i class="fa fa-user"></i>
                        <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
                    </span>
                    <span>&nbsp;|&nbsp;</span>
                    <span>
                        <i class="fa fa-eye"></i>
                        <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
                    </span>
                </div>
            </div>
            

            
        </div>
    </div>
    

    <div class="footer-copyright pink-link-context">
        <div class="container">
            © 2016 yalesuperman, All rights reserved.
            <p class="right" style="margin-top: 0;">本博客由 <a href="https://hexo.io">Hexo</a> 强力驱动 | 主题 <a href="https://github.com/raytaylorlin/hexo-theme-raytaylorism">raytaylorism</a></p>
        </div>
    </div>
</footer>


    <noscript>
    <div class="noscript">
        <p class="center-align">当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器</p>
    </div>
</noscript>
<div class="noscript">
    <p class="center-align">当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器</p>
</div>


<script src="/js/jquery.min.js"></script>
<script src="/js/materialize.min.js"></script>
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

<script>
    (function($) {
        $(document).ready(function() {
            // 隐藏禁用javascript（针对微信内置浏览器）的提示
            $('.noscript').hide();

            // 图片缩放效果
            var $imgs = $('img').not('.slider-image').not('.avatar-image').not('.carousel-image').not('.card-cover-image').not('.qrcode');

            // 给图片加上点击放大效果（materialbox插件）
            $imgs.addClass('materialboxed').each(function(i, el) {
                $(this).attr('data-caption', $(this).attr('alt') || ' ');
            }).materialbox();

            // 优化表格的显示
            $('table').each(function() {
                var $table = $(this);
                // 除去多行代码的情况
                if ($table.find('pre').length == 0) {
                    $table.addClass('responsive-table striped bordered');
                }
            });

            // 首页幻灯片
            $('.slider').slider({indicators: false, full_width: true, interval: 8000});

            $(".button-collapse").sideNav();
            $(".category-menu").sideNav();

            // 针对gallery post
            $('.carousel').carousel({full_width: true});
            $('.carousel-control.prev').click(function() {
                $('.carousel').carousel('prev');
            });
            $('.carousel-control.next').click(function() {
                $('.carousel').carousel('next');
            });

            // 文章目录
            $('article').not('.simple-article').find('h1').add('h2').add('h3').add('h4').add('h5').add('h6').scrollSpy();

            // 目录随屏幕滚动（防止目录过长越过footer）
            var $toc = $('.toc');
            var scrollTargetTop = 0;
            $(window).scroll(function() {
                var $activeLink = $toc.find('a.active.section');
                if ($(window).scrollTop() < 100) {
                    scrollTargetTop = 0;
                } else {
                    if ($activeLink[0]) {
                        scrollTargetTop = $activeLink.offset().top - $toc.offset().top;
                    }
                }
                $toc.css('top', '-' + scrollTargetTop + 'px');
            });

            // 修正文章目录的left-border颜色
            var color = $('.table-of-contents-text').css('color');
            $('.table-of-contents-link').css('border-left-color', color);

            // 针对移动端做的优化：FAB按钮点击一下收回
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                $('.fixed-action-btn').addClass('click-to-toggle');
            }
            // 回到顶部
            $('.btn-return-top').click(function() {
                $('body, html').animate({
                    scrollTop: 0
                }, 500);
            });

            // 重置读书页面的Tab标签页的颜色
            $('li.tab a').hover(function() {
                $(this).toggleClass('text-lighten-4');
            });
            $('.indicator').addClass('pink lighten-2');

            
            // 添加new标签
            $('.menu-reading, .menu-about').append('<span class="new badge pink"></span>');
            

            // 搜索功能
            $('.modal-trigger').leanModal({
                // 打开搜索框时自动聚焦
                ready: function() {
                    if ($('#search').is(":visible")) {
                        $('#search-input').focus();
                    }
                }
            });
            var searchXml = "search.xml";
            if (searchXml.length == 0) {
             	searchXml = "search.xml";
            }
            var searchPath = "/" + searchXml;
            initSearch(searchPath, 'search-input', 'search-result');
        });

        // 初始化搜索与匹配函数
        var initSearch = function(path, search_id, content_id) {
            'use strict';
            $.ajax({
                url: path,
                dataType: "xml",
                success: function(xmlResponse) {
                    // get the contents from search data
                    var datas = $("entry", xmlResponse).map(function() {
                        return {
                            title: $("title", this).text(),
                            content: $("content", this).text(),
                            url: $("url", this).text()
                        };
                    }).get();
                    var $input = document.getElementById(search_id);
                    var $resultContent = document.getElementById(content_id);
                    $input.addEventListener('input', function() {
                        var str = '<ul class=\"search-result-list\">';
                        var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                        $resultContent.innerHTML = "";
                        if (this.value.trim().length <= 0) {
                            return;
                        }
                        // perform local searching
                        datas.forEach(function(data) {
                            var isMatch = true;
                            var content_index = [];
                            var data_title = data.title.trim().toLowerCase();
                            var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                            var data_url = data.url;
                            var index_title = -1;
                            var index_content = -1;
                            var first_occur = -1;
                            // only match artiles with not empty titles and contents
                            if (data_title != '' && data_content != '') {
                                keywords.forEach(function(keyword, i) {
                                    index_title = data_title.indexOf(keyword);
                                    index_content = data_content.indexOf(keyword);
                                    if (index_title < 0 && index_content < 0) {
                                        isMatch = false;
                                    } else {
                                        if (index_content < 0) {
                                            index_content = 0;
                                        }
                                        if (i == 0) {
                                            first_occur = index_content;
                                        }
                                    }
                                });
                            }
                            // show search results
                            if (isMatch) {
                                keywords.forEach(function(keyword) {
                                    var regS = new RegExp(keyword, "gi");
                                    data_title = data_title.replace(regS, "<span class=\"search-keyword pink lighten-2\">" + keyword + "</span>");
                                });

                                str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
                                var content = data.content.trim().replace(/<[^>]+>/g, "");
                                if (first_occur >= 0) {
                                    // cut out 100 characters
                                    var start = first_occur - 20;
                                    var end = first_occur + 80;
                                    if (start < 0) {
                                        start = 0;
                                    }
                                    if (start == 0) {
                                        end = 100;
                                    }
                                    if (end > content.length) {
                                        end = content.length;
                                    }
                                    var match_content = content.substring(start, end);
                                    // highlight all keywords
                                    keywords.forEach(function(keyword) {
                                        var regS = new RegExp(keyword, "gi");
                                        match_content = match_content.replace(regS, "<span class=\"search-keyword pink lighten-2\">" + keyword + "</span>");
                                    });

                                    str += "<p class=\"search-result\">..." + match_content + "...</p>"
                                }
                                str += "</li>";
                            }
                        });
                        str += "</ul>";
                        $resultContent.innerHTML = str;
                    });
                }
            });
        }
    })(jQuery);
</script>


<script src="/js/prettify.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("pre").addClass("prettyprint");
        prettyPrint();
    });
</script>






<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" async
  src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>



</body>
</html>
